<template>
    <div class="artListBody">
        <el-tabs type="border-card">
            <el-tab-pane label="游记攻略">
                <ul-list v-model="artList1" deleteLiButton></ul-list>
            </el-tab-pane>
            <el-tab-pane label="组队信息">
                <div class="card" v-for="(item,index) in teamList" :key="index">
                    <div class="rightTop">
                        <el-popconfirm title="确定删除？" @onConfirm="deleteLi(item.id)">
                            <i class="el-icon-delete" slot="reference"></i>
                        </el-popconfirm>
                    </div>
                    <div style="padding:0;width:160px" @click="gotodetails">
                        <img height="100%" :src="item.src" />
                    </div>
                    <div style="padding:5px" @click="gotodetails">
                        <div class="cardRi">
                            <div>
                                地点:
                                <span class="blueFont">{{item.destination}}</span>
                            </div>
                            <div>
                                时间:
                                <span class="blueFont">{{item.time}}</span>
                            </div>
                            <div>
                                人数:
                                <span class="blueFont">{{item.peopleNum}}</span>
                            </div>
                        </div>
                        <div class="hiddenText" style="-webkit-line-clamp: 6;">
                            <span class="blueFont">详细计划:</span>
                            {{item.plan}}
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            artList1: [
                {
                    id: 1,
                    likeNum: 8658,
                    plNum: 678,
                    src: [
                        require("../../../static/images/gl_1.jpg"),
                        require("../../../static/images/gl_2.jpg")
                    ],
                    title: "坐着火车游欧洲，精彩十日，梦幻之旅",
                    text:
                        " 欧铁之旅，再续前缘经常看我文章的朋友也许还记得，去年寒假，我们一家乘坐列车，穿行于欧洲大陆，在荷兰、瑞士、德国、法国、西班牙、意大利进行了长达50天的精彩旅行。虽然假期有尽头，但欧铁之行却只是始于彼时的一个点，年9月我又次应邀登上列车，再续前缘，开启了另一段精彩的欧旅程。下面的文章不能成为你游览世界的GPS，但也许这些性文可以诉你哪最能领略巴黎风情？在马赛什么最好吃？世界非遗叠塔什么样？什么在吉罗要亲狮子屁屁巴塞罗那高迪哪个建筑最棒？最童声在哪里？想知这些内容，请花半时和我们一起走进精的欧铁之旅"
                },
                {
                    id: 2,
                    likeNum: 58,
                    plNum: 67,
                    src: [
                        require("../../../static/images/gl_3.jpg"),
                        require("../../../static/images/gl_4.jpg")
                    ],
                    title: "慢行日本 | 赴一场函馆的冬日之约",
                    text:
                        "安政6年（1859年），函馆与横滨、长崎一起作为日本首批国际贸易港开放。 港口的开放带动了市井的繁荣，数不清的西洋人与西洋文化从这里上岸，源源不断的向内陆传播。踏上这片已近零下的冰雪大地。函馆的荣耀，就从这时开始说起。港口的开放带动了市井的繁荣，数不清的西洋人与西洋文化从这里上岸，源源不断的向内陆传播。踏上这片已近零下的冰雪大地。函馆的荣耀，就从这时开始说起。"
                }
            ],
            teamList: [
                {
                    id: 1,
                    destination: "故宫",
                    time: "2020-5-20",
                    peopleNum: "4",
                    plan: `北京故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。北京故宫于明成祖永乐四年（1406年）开始建设，以南京故宫为蓝本营建，到永乐十八年（1420年）建成。它是一座长方形城池，南北长961米，东西宽753米，四面围有高10米的城墙，城外有宽52米的护城河。紫禁城内的建筑分为外朝和内廷两部分。外朝的中心为太和殿、中和殿、保和殿，统称三大殿，是国家举行大典礼的地方。内廷的中心是乾清宫、交泰殿、坤宁宫，统称后三宫，是皇帝和皇后居住的正宫。  北京故宫是世界上现存规模最大、保存最为完整的木质结构古建筑之一，是国家AAAAA级旅游景区， 1961年被列为第一批全国重点文物保护单位；  1987年被列为世界文化遗产。`,
                    src: require("../../../static/images/rightList_1.jpeg")
                },
                {
                    id: 2,
                    destination: "天安门广场",
                    time: "2020-5-22",
                    peopleNum: "5",
                    plan: `天安门广场，位于北京市中心，地处北京市东城区东长安街，北起天安门，南至正阳门，东起中国国家博物馆，西至人民大会堂，南北长880米，东西宽500米，面积达44万平方米  北京故宫是世界上现存规模最大、保存最为完整的木质结构古建筑之一，是国家AAAAA级旅游景区， 1961年被列为第一批全国重点文物保护单位；  1987年被列为世界文化遗产。`,
                    src: require("../../../static/images/rightList_2.jpeg")
                },
                {
                    id: 3,
                    destination: "八达岭长城",
                    time: "2020-5-30",
                    peopleNum: "6",
                    plan: `八达岭长城，位于北京市延庆区军都山关沟古道北口。是中国古代伟大的防御工程万里长城的重要组成部分，是明长城的一个隘口。八达岭长城为居庸关的重要前哨，古称“居庸之险不.八达岭长城，位于北京市延庆区军都山关沟古道北口。是中国古代伟大的防御工程万里长城的重要组成部分，是明长城的一个隘口。八达岭长城为居庸关的重要前哨，古称“居庸之险不`,
                    src: require("../../../static/images/rightList_3.jpeg")
                }
            ]
        };
    },
    methods: {
        deleteLi(deleteId) {
            var i = this.teamList.findIndex(x => x.id == deleteId);
            this.teamList.splice(i, 1);
            // this.axios
        },
        gotodetails() {
            this.$router.push({ path: "/details" });
        }
    }
};
</script>
<style>
div.artListBody {
    margin: 10px 50px;
}
div.artListBody li.list-group-item {
    border: 0;
    border-bottom: 1px solid #ddd;
}
/* card */
div.artListBody .card {
    margin-top: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 160px;
    display: flex;
}

div.artListBody div.cardRi {
    display: flex;
    justify-content: space-around;
    font-size: 15px;
    line-height: 200%;
}

div.artListBody span.blueFont {
    font-weight: 700;
    color: rgb(64, 158, 255);
    font-size: 17px;
}

div.artListBody span.blueFont {
    font-weight: 700;
    color: rgb(64, 158, 255);
    font-size: 17px;
}

div.artListBody div.rightTop {
    position: absolute;
    right: 35px;
}
</style>